<template>
  <div >
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="短信发送测试" name="first">
          <el-alert
            title="1. 建议测试前确保套餐包余量或账户资金充足，以保证短信测试成功。"
            type="warning"
            :closable="false">
          </el-alert>
          <el-alert
            title="2. 本功能仅适用于API/控制台发送测试阶段，建议您尽早申请符合您业务真实场景的签名、模板。"
            type="warning"
            :closable="false">
          </el-alert>
          <el-alert
            title="3. 需要添加测试手机号码，才能发送测试。您可以前往 业务统计 查看发送结果及明细。"
            type="warning"
            :closable="false">
          </el-alert>
          <el-alert
            title="4. 普通短信70个字，长短信64个字/条计费（包含签名）,长短信不拆分。"
            type="warning"
            :closable="false">
          </el-alert>

          <div style="margin-top: 20px"></div>
          <el-row :gutter="20">
            <el-col :xs="48" :sm="48" :md="28" :lg="16">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>联系信息</span>
                </div>
                <div class="body">
                  <el-form>




                    <el-form-item label="短信服务" prop="smsProductId">
                      <el-select @change="smsProductSelect" style="width: 400px" v-model="smsProductId" placeholder="请选择短信服务">
                        <el-option
                          v-for="dict in smsProductListTemp"
                          :key="dict.smsProductId"
                          :label="`${dict.remark}(剩余${dict.smsProductBlance}条)`"
                          :value="dict.smsProductId"

                        ></el-option>
                      </el-select>
                      <br/>
                      <span class = "span_tip">没有需要的产品，马上<a style="color: #0070cc;" href="/cmc_product/smsproduct">添加产品</a>。点此查看<a style="color: #0070cc;" href="/cmc_product/smsproduct">产品列表</a></span>
                    </el-form-item>



                    <el-form-item label="短信签名" prop="smsSignatureId">
                      <el-select @change="signatureSelect" style="width: 400px" v-model="smsSignatureId" placeholder="请选择短信签名">
                        <el-option
                          v-for="dict in signatureListTemp"
                          :key="dict.smsSignatureId"
                          :label="dict.smsSignatureName"
                          :value="dict"

                        ></el-option>
                      </el-select>
                      <br/>
                      <span class = "span_tip">没有需要的签名，马上<a style="color: #0070cc;" href="/cmc_product/signature">添加签名</a>。点此查看<a style="color: #0070cc;" href="/cmc_product/signature">签名列表</a></span>
                    </el-form-item>



                    <el-form-item label="短信模板" prop="smsTemplateId">
                      <el-select @change="templateSelect"  style="width: 400px" v-model="smsTemplateId" placeholder="请选择短信模板">
                        <el-option
                          v-for="dict in templateListTemp"
                          :key="dict.smsTemplateId"
                          :label="dict.smsTemplateName"
                          :value="dict"
                        ></el-option>
                      </el-select>
                      <br/>
                      <span class = "span_tip">没有需要的模板，马上<a style="color: #0070cc;" href="/cmc_product/template">添加模板</a>。点此查看<a style="color: #0070cc;" href="/cmc_product/template">模板列表</a></span>
                    </el-form-item>


                    <el-form-item label="接收手机号码">
                      <span style="font-size: 12px;color: #5a5e66">输入或黏贴接收短信的手机</span>
                      <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="sendPhoneTest"
                        @input="sendPhoneTestline"
                      >
                      </el-input>
                      <span style="font-size: 12px;color: #5a5e66">多个号码请用回车分开，即一行算一个号码，一次最多发送2万个手机号码您一共输入了（{{ sendPhoneTestNum }}）个号码 ，自动过滤重复号码。</span>
                    </el-form-item>

                    <el-button type="primary" @click="sendTestSms">立即发送测试</el-button>
                  </el-form>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>实例展示</span>
                </div>
                <div style="text-align: center">
                  <div class="bg_big">
                     <div class="bg_big_content">
                          <div class="bg_big_sms_content">
                            {{ signatureAll }}
                          </div>
                          <div class="bg_big_sms_tip">
                            计费说明：短信含签名（{{ sendTestNum }}）个字，按（{{ sendTestTNum }}）条计费（实际发送时，签名、变量长度会影响总字数）。
                          </div>
                     </div>
                  </div>

                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>


        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { listSignatureTemp } from "@/api/sms/signature";
import { listTemplate } from "@/api/sms/template";
import { listSmsproduct } from "@/api/sms/smsproduct";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      activeName: "first",
      sendTestText:"",
      sendTestNum:0,
      sendTestTNum:0,
      sendPhoneTest:'',
      sendPhoneTestNum:1,
      smsSignatureId:'',//短信签
      smsSignatureIdForText:'',
      signatureListTemp:[],
      smsTemplateId:'',
      smsTemplateIdForText:'',
      templateListTemp:[],
      smsProductId:'',//产品ID
      smsProductIdForText:'',
      smsProductListTemp:[],
      queryParamsTemp: {
        pageNum: 1,
        pageSize: 10
      },
      signatureAll:'',
      signatureTitle:'',
      templateContent:''
    };
  },
  created() {
    this.getListTemp();
    this.getListTemplateListTemp;
  },
  methods: {
    signsetSize(value){
      let abc =  parseInt(value.length/70)
      this.sendTestTNum = abc + 1;
      this.sendTestNum = value.length;
    },
    sendPhoneTestline(value){
      if (value.length==0){
        this.sendPhoneTestNum = 0
      }else {

        //换行符转换成数组
        let  phoneArr=this.sendPhoneTest.split(/[(\r\n)\r\n]+/);
        //删除空项
        phoneArr.forEach((item,index)=>{
          if(!item){
            phoneArr.splice(index,1);
          }
        })

        this.sendPhoneTestNum = phoneArr.length
      }

    },
    getListTemp() {
      this.loading = true;
      listSignatureTemp(this.queryParamsTemp).then(response => {
        this.signatureListTemp = response.rows;
      });
      listTemplate(this.queryParamsTemp).then(response => {
        this.templateListTemp = response.rows;
      });
      listSmsproduct(this.queryParamsTemp).then(response => {
        this.smsProductListTemp = response.rows;
      });
    },

    signatureSelect(value){

      this.smsSignatureId = value.smsSignatureName
      this.smsSignatureIdForText = value.smsSignatureId+""
      this.signatureTitle = value.smsSignatureName
      this.signatureAll = ''
      this.signatureAll = "【"+this.signatureTitle+"】"+this.signatureAll+this.templateContent;
      this.signsetSize(this.signatureAll)
      },

    templateSelect(value){
      this.templateContent = value.smsTemplateContent
      this.smsTemplateIdForText = value.smsTemplateId+""
      this.signatureAll = ''
      this.signatureAll = "【"+this.signatureTitle+"】"+this.signatureAll+this.templateContent;
      this.signsetSize(this.signatureAll)
      //
      //
      // this.templateContent = value
      // this.signatureAll = ''
      // this.signatureAll = this.signatureTitle+this.signatureAll+this.templateContent;
      // this.signsetSize(this.signatureAll)
    },

    smsProductSelect(value){
      this.smsProductId = value
    },


    sendTestSms(){
      let params1 = {
        "smsSignatureId":this.smsSignatureIdForText,
        "smsTemplateId":this.smsTemplateIdForText,
        "sendPhoneTest":this.sendPhoneTest,
        "smsProductId":this.smsProductId
      }
     if (this.smsProductId === '' || this.smsProductId+"".trim().length === 0){
        this.$notify.error({
          title: '产品未选择错误',
          message: '请选择正确的产品',
        });
        return;
      }else if (this.smsSignatureIdForText === '' || this.smsSignatureIdForText.trim().length === 0){
        this.$notify.error({
          title: '短信模板错误',
          message: '签名选择不正确',
        });
        return;
      }else if (this.smsTemplateIdForText === '' || this.smsTemplateIdForText.trim().length === 0){
        this.$notify.error({
          title: '短信模板错误',
          message: '模板选择不正确',
        });
         return;
      }else if (this.sendPhoneTest === '' || this.sendPhoneTest.trim().length === 0){
        this.$notify.error({
          title: '手机号错误',
          message: '测试手机号为空',
        });
         return;
      }

      //换行符转换成数组
    let  phoneArr=this.sendPhoneTest.split(/[(\r\n)\r\n]+/);
     //删除空项
      phoneArr.forEach((item,index)=>{
        if(!item){
          phoneArr.splice(index,1);
        }
      })

      //定义正则表达式
      var reg='^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-9])|(18[0-9])|166|198|199|191|(147))\\d{8}$';
      //创建正则表达式对象
      var regExp=new RegExp(reg);
      //使用test()函数验证数据是否匹配正则表达式，匹配返回true,否则返回false

      //判断手机号是否正确
      phoneArr.forEach((item,index)=>{
         if (!regExp.test(item)){
           this.$notify.error({
             title: '第'+(index+1)+"条手机号出错",
             message: item+'手机号不符合条件',
           });
         }
      })
      let params = {
        "smsSignatureId":this.smsSignatureIdForText,
        "smsTemplateId":this.smsTemplateIdForText,
        "sendPhoneTest":this.sendPhoneTest,
        "smsProductId":this.smsProductId
      }
      console.log(params)
    }
  },
};
</script>

<style>
.bg_big{
  width: 216px;
  min-height: 525px;
  overflow: hidden;
  background: url(../../assets/images/phone_li.png) no-repeat 0 0/100%;
  /*margin: auto;*/
}
.bg_big_content{
  height: 330px;
  margin: 70px 7px 0;
  padding: 0 15px;
  overflow-y: auto;
}
.bg_big_sms_content{
  position: relative;
  min-height: 40px;
  margin: 15px 0 0;
  padding: 10px;
  color: #333;
  word-wrap: break-word;
  background: #e9e9eb;
  border-radius: 10px;
  font-size:12px
}
.bg_big_sms_content:after {
  position: absolute;
  bottom: 2px;
  left: -5px;
  border-bottom: 10px solid #e6e7ec;
  border-left: 10px solid transparent;
  content: "";
}
.bg_big_sms_tip {
  margin: 8px 0;
  color: #888;
  font-size: 12px;
  line-height: 20px;
}
</style>

